<template>
	<view class="homeDesign" >
		<view class="homeDesign_body"  :data-id='id' @tap="toDetail" :style="{paddingTop:isInPerSonal?0:''}">
			<view class="author_message" v-if="!isInPerSonal&&!examineIng&&!examineSucess">
				<image :src="message.userImage" @tap.stop="toPersonalDeail" :data-userid="message.userId" data-type='作品' lazy-load ></image>
				<view>
					<text>{{message.userName}}</text>
					<text>{{message.apartmentContent?message.apartmentContent:message.designApartment}}  {{message.areaNumber}}平方米  {{message.placeContent?message.placeContent:message.designPlace}}</text>
				</view>
			</view>
			<view class="homeDesign_message" v-if="isInPerSonal">
				<text>{{message.apartmentContent?message.apartmentContent:message.designApartment}}</text><text style="margin-left: 0.7em;">{{message.areaNumber}}平方米</text><text style="margin-left: 0.7em;">{{message.placeContent?message.placeContent:message.designPlace}}</text>
			</view>
			<view class="homeDesign_message" v-if="examineIng||examineSucess" style="height: 24rpx;padding-bottom: 6rpx;box-sizing: content-box;">
				<text style="color: #999999;font-size: 24rpx;line-height: 24rpx;">{{message.addTime}}</text>
			</view>
			<view class="homeDesign_img" :style="{marginTop:isInPerSonal?0:''}">
				<view>
					<text>{{message.styleContent?message.styleContent:message.designStyle}}</text>
				</view>
				<image :src="message.coverImage" mode="aspectFill" lazy-load></image>
			</view>
			<view class="homeDesign_content">
				<text class="homeDesign_content_title">{{message.designTitle}}</text>
				<view>
						<text class="homeDesign_content_content1">“</text>
						<text class="homeDesign_content_content two_ellipsis" v-html="message.introduce"></text>
				</view>
			</view>
		</view>
		<view class="homeDesign_button" v-if="!examineIng">
			<view @tap="toCollect">
				<image :src="message.collection==0?loved:love" ></image>
				<text :class="{isDoed:message.collection==0}">{{message.collectionNumber>0?message.collectionNumber:'收藏'}}</text>
			</view>
			<view @tap="toAnswer">
				<image src="/static/svg/comments.svg" ></image>
				<text>{{message.discussNumber>0?message.discussNumber:'评论'}}</text>
			</view>
			<view @tap="toPraise">
				<image :src="message.zan==0?praised:praise" ></image>
				<text :class="{isDoed:message.zan==0}">{{message.zanNumber>0?message.zanNumber:'点赞'}}</text>
			</view>
			<view @tap='toshare'>
				<image src="/static/svg/share.svg" ></image>
				<text>分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	export default {
		name:"homeDesign",
		props: {
			id: {
				type:String,
				default:""
			},
			isInPerSonal: {
				type:Boolean,
				default:false
			},
			message: {
				type: Object,
				default(){
				    return {}
				}
			},
			index: {
				type: Number,
				default: 0
			},
			isIndex: {
				type:Boolean,
				default:false
			},
			isInDetail: {
				type:Boolean,
				default:false
			},
			examineIng: {
				type:Boolean,
				default:false
			},
			examineSucess: {
				type:Boolean,
				default:false
			},
		},
		data() {
			return {
				love:require('@/static/svg/love.svg'),
				loved:require('@/static/svg/love1.svg'),
				praise:require('@/static/svg/praise.svg'),
				praised:require('@/static/svg/praise1.svg'),
			}
		},
		methods:{
			toDetail(e){
				if(this.examineIng){
					let message={}
					message.title=this.message.designTitle
					message.imgSrc=this.message.coverImage
					message.style=(this.message.designStyle=='不限'||!this.message.designStyle)?'其它':this.message.designStyle
					message.otherStyle=this.message.styleContent
					message.place=(this.message.designPlace=='不限'||!this.message.designPlace)?'其它':this.message.designPlace
					message.otherPlace=this.message.placeContent
					message.layout=(this.message.designApartment=='不限'||!this.message.designApartment)?'其它':this.message.designApartment
					message.otherLayout=this.message.apartmentContent
					message.area=this.message.areaNumber
					message.html=JSON.parse(this.message.designContent) 
					localStorage.setItem('releaseDesignMessage',JSON.stringify(message))
					uni.navigateTo({
						url: '/pages/releaseDesign/designLook?isfromMy=true'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/homeDesign/homeDesignIndex?id='+this.message.designId+'&designStyle='+this.message.designStyle+"&designPlace="+this.message.designPlace
				})
			},
			toOtherHomepage(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let id=e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/otherHomepage/designerIndex?userId='+id
				})
			},
			async toCollect(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.designId=this.message.designId
				data.userId=localStorage.getItem('userId')
				data.category=1
				data.state=0
				let res
				if(this.message.collection!=0){
					res=await urls.setFabulous(data)
					if(res.code==0){
						this.$emit('collect',this.index,true)
					}
				}else{
					res=await urls.reduceZan(data)
					if(res.code==0){
						this.$emit('collect',this.index,false)
					}
				}	
			},
			async toAnswer(){
				if(this.isIndex){
					this.toDetail()
				}
			},
			async toPraise(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.designId=this.message.designId
				data.userId=localStorage.getItem('userId')
				data.category=1
				data.state=1
				let res
				if(this.message.zan!=0){
					res=await urls.setFabulous(data)
					if(res.code==0){
						this.$emit('praise',this.index,true)
					}
				}else{
					res=await urls.reduceZan(data)
					if(res.code==0){
						this.$emit('praise',this.index,false)
					}
				}	
			},
			async toshare(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.designId=this.message.designId
				data.userId=localStorage.getItem('userId')
				data.category=1
				data.state=3
				let res
				res=await urls.setFabulous(data)
				if(res.code==0){
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homeDesign{
		width: 750rpx;
		min-width: 750rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}
	.homeDesign_body{
		padding: 30rpx;
		border-bottom:1rpx solid #EEEEEE;
		.author_message{
			display: flex;
			align-items: center;
			image{
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
			}
			view{
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				height: 80rpx;
				margin-left: 16rpx;
				text:first-of-type{
					color: #333333;
					font-size: 30rpx;
					letter-spacing: 1rpx;
					font-weight: bold;
					line-height:30rpx;
					position: relative;
					top: 6rpx;
				}
				text:nth-of-type(2){
					position: relative;
					bottom: 6rpx;
					line-height:24rpx;
					color: #999999;
					font-size: 24rpx;
					letter-spacing: 1rpx;
				}
			}
		}
		.homeDesign_img{
			height: 320rpx;
			width: 690rpx;
			margin-top: 30rpx;
			position: relative;
			view{
				position: absolute;
				left: 0;
				top: 0;
				height: 44rpx;
				opacity: 0.8;
				background-color: #D7BD9F;
				border-top-left-radius: 9rpx;
				z-index: 2;
				text{
					line-height:44rpx ;
					font-size: 24rpx;
					color: #704F29;
					letter-spacing: 1rpx;
					padding:0 16rpx;
					display: block;
				}
			}
			image{
				height: 100%;
				width: 100%;
				border-radius: 9rpx;
			}
		}
		.homeDesign_content{
			margin-top: 24rpx;
			.homeDesign_content_title{
				font-size: 28rpx;
				color: #333333 ;
				letter-spacing: 1rpx;
				font-weight: bold;
				line-height:28rpx;
				display: block;
			}
			view{
				margin-top: 20rpx;
				position: relative;
				.homeDesign_content_content1{
					position: absolute;
					top: 0;
					left: -0rpx;
					font-size: 80rpx;
					color: #888888;
					line-height: 72rpx;
					letter-spacing: 3rpx;
				}
				.homeDesign_content_content{
					max-height:92rpx;
					font-size: 24rpx;
					color: #666666;
					line-height: 46rpx;
					text-align: justify;
					text-indent: 1.5em;
				}
			}
		}
	}
	.homeDesign_button{
		height: 84rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		justify-content: space-between;
		view{
			display: flex;
			align-items: center;
			height: 100%;
			text{
				font-size: 24rpx;
				color: #666666;
				letter-spacing: 1rpx;
				margin-left: 8rpx;
				line-height: 28rpx;
			}
			image{
				height: 28rpx;
				width: 28rpx;
			}
			.isDoed{
				color: #B3392B;
			}
		}
	}	
	.homeDesign_message{
		display: flex;
		height: 96rpx;
		align-items: center;
		text{
			font-size:24rpx ;
			color:#999999 ;
			letter-spacing: 1rpx;
		}
	}
</style>
